<!-- 提还箱点 -->
<template>
  <div class="return-box">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="24">
        <el-form label-width="80px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
          <el-form-item label="代码">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="formData.yardName"></el-input>
          </el-form-item>
          <el-form-item label="区域">
           <el-input v-model="formData.yardArea"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
           <el-input v-model="formData.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="getTableData(1, 10)">查询</el-button>
            <el-button size="mini" @click="empty">清空</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 操作 -->
    <el-row>
      <el-form size="mini" :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" size="mini" @click="addReturnBox">新增</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%; overflow-x: auto;">
      <el-table-column
        align="center"
        label="堆场名称">
        <template slot-scope="scope">
          {{scope.row.yardName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="堆场代码">
        <template slot-scope="scope">
          {{scope.row.code}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="堆场区域">
        <template slot-scope="scope">
          {{scope.row.yardArea}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="工作时间">
        <template slot-scope="scope">
          {{scope.row.jobTime}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="联系电话">
        <template slot-scope="scope">
          {{scope.row.phoneNumber}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="详细地址">
        <template slot-scope="scope">
          {{scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="经度">
        <template slot-scope="scope">
          {{scope.row.lat}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="维度">
        <template slot-scope="scope">
          {{scope.row.lng}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="100px"
        label="是否寄单点">
        <template slot-scope="scope">
          {{scope.row.sendPoint}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="100px"
        label="是否暂落点">
        <template slot-scope="scope">
          {{scope.row.temPlacement}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="100px"
        label="是否甩挂点">
        <template slot-scope="scope">
          {{scope.row.leftPoint}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="eir名称">
        <template slot-scope="scope">
          {{scope.row.eEIR_Name}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="modify(scope.$index, scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="return-box-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[10, 15, 20]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <add-return-box></add-return-box>
    <edit-return-box :myData="rowData"></edit-return-box>
  </div>
</template>

<script>
import { returnPointList } from './api/returnTheBox'
import AddReturnBox from './dialog/AddReturnBox.vue'
import EditReturnBox from './dialog/EditReturnBox.vue'
export default {
  components: {
    AddReturnBox,
    EditReturnBox
  },
  data () {
    return {
      tableData: [],
      pageNo: 1,
      number: 10,
      total: 0,
      formData: {
        code: '',
        yardName: '',
        yardArea: '',
        phoneNumber: ''
      },
      rowData: {}
    }
  },
  async mounted () {
    this.getTableData(1, 10)
  },
  methods: {
    // 修改
    modify (index, row) {
      this.rowData = row
      this.$store.commit('show_edit_return_box')
      console.log(row)
    },
    // 获取表格数据123
    async getTableData (pg, nb) {
      const res = await returnPointList({
        code: this.formData.code,
        yardName: this.formData.yardName,
        yardArea: this.formData.yardArea,
        phoneNumber: this.formData.phoneNumber,
        page: pg,
        num: nb
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 新增
    addReturnBox () {
      this.$store.commit('show_add_return_box')
    },
    handleCurrentChange (val) {
      this.getTableData(val, this.numb)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getTableData(this.pageNo, val)
      this.numb = val
    },
    // 清空
    empty () {
      this.formData.code = ''
      this.formData.yardName = ''
      this.formData.yardArea = ''
      this.formData.phoneNumber = ''
    }
  }
}
</script>

<style lang="less">
  .return-box-pagination {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
</style>
